<template>
  <div class="setting-panel">
    <div>属性设置</div>
    <VDivider style="margin: 10px 0;" />
    <VExpansionPanels
      v-model="panel"
      multiple
      class="no-icon-rotate"
    >
      <VExpansionPanel>
        <VExpansionPanelTitle>
          基本属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <VTextField
            v-model="componentId"
            label="组件ID"
          />
        </VExpansionPanelText>
      </VExpansionPanel>

      <!--
        <VExpansionPanel>
        <VExpansionPanelTitle>
        Sales report generated
        </VExpansionPanelTitle>
        <VExpansionPanelText>
        Bear claw ice cream icing gummies gingerbread cotton candy tootsie roll cupcake macaroon. Halvah brownie soufflé. Pie dragée macaroon. Tart tootsie roll chocolate bar biscuit jujubes lemon drops. Pudding cotton candy tart jelly-o bear claw lollipop. Jelly-o apple pie candy bonbon chupa chups cupcake cotton candy. Sweet roll cotton candy toffee caramels. Jelly-o chocolate cake toffee pastry halvah. Muffin tiramisu ice cream danish jelly-o brownie powde
        </VExpansionPanelText>
        </VExpansionPanel>

        <VExpansionPanel>
        <VExpansionPanelTitle>
        High Memory usage
        </VExpansionPanelTitle>
        <VExpansionPanelText>
        Jelly beans wafer lemon drops macaroon muffin gummies muffin. Ice cream oat cake chocolate bar sesame snaps. Halvah macaroon caramels gummies. Marshmallow jelly beans danish. Cake chocolate cake tiramisu chocolate bar sugar plum biscuit jelly danish. Pudding gummi bears sesame snaps cake soufflé ice cream chocolate bar. Cotton candy ice cream danish chocolate cake topping ice cream. Brownie muffin gingerbread.
        </VExpansionPanelText>
        </VExpansionPanel> 
      -->
    </VExpansionPanels>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
  edgeData: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const emits  = defineEmits(["setEdgeProp"])
const panel = ref(0)

// 使用 ref 创建响应式对象
const edgeDataRef = ref(props.edgeData)

const componentId = ref(props.edgeData.properties.componentId)

watch(componentId, val => {
  emits('setEdgeProp', { "componentId": val })
})
</script>

<style scoped>
.setting-panel {
  padding: 10px;
  background: #f9f9f9;
  block-size: calc(100vh - 273px);
  inline-size: 200px;
  inline-size: 320px;
  margin-block-start: 66px;

  /* border: 1px solid #ccc; */
  margin-inline-end: 14px;
  overflow-y: scroll;
}

.style-wrapper {
  display: flex;
}

.style-item {
  border: 1px solid #fff;
  block-size: 20px;
  cursor: pointer;
  inline-size: 20px;
  margin-inline-end: 5px;
}

.setting-item-title {
  color: #333;
  font-size: 14px;
  margin-block-start: 10px;
}
</style>
